<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>艺术盒子首页</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/shouye.css"/>
	</head>
	<body>
		<div class="web">
			<!--头部导航栏-->
			<div class="top">
				<div><img src="img/shouye1.png"/></div>
				<div><img src="img/shouye2.png"/></div>
				<div><img src="img/shouye3.png"/></div>
				<div><img src="img/shouye4.png"/></div>
				<div><img src="img/shouye5.png"/></div>
			</div>
			<!--轮播图-->
			<div class="lunbotu">
				<img src="img/shouye6.jpg"/>
			</div>
			<!--轮播图下面的图-->
			<div class="tu">
				<a href=""><img src="img/shouye7.png"/></a>
				<a href=""><img src="img/shouye8.png"/></a>
				<a href=""><img src="img/shouye9.png"/></a>
				<a href=""><img src="img/shouye10.png"/></a>
			</div>
			<!--圈子推荐-->
			<div class="quanzi">
				<div class="first">
					<img src="img/shouye4.png"/>
					<span>&ensp;圈子推荐</span>
				</div>
				<div class="second">
					<ul>
						<li>
							<div>
								<img src="img/shouye12.jpg"/>
							</div>
							<div>
									<p>广州舞者官方群</p>
									<p><span>一场梦幻般的体验，小心迷失</span><a><img src="img/shouye23.png"/></a></p>
									<ul>
										<li><img src="img/shouye20.png"/>&ensp;96</li>
										<li><img src="img/shouye21.png"/>&ensp;96</li>
										<li><img src="img/shouye22.png"/>&ensp;13</li>
									</ul>
							</div>
						</li>
						<li>
							<li>
							<div>
								<img src="img/shouye13.jpg"/>
							</div>
							<div>
									<p>广州舞者官方群</p>
									<p><span>一场梦幻般的体验，小心迷失</span><a><img src="img/shouye23.png"/></a></p>
									<ul>
										<li><img src="img/shouye20.png"/>&ensp;96</li>
										<li><img src="img/shouye21.png"/>&ensp;96</li>
										<li><img src="img/shouye22.png"/>&ensp;13</li>
									</ul>
							</div>
						</li>
						</li>
						<li>
							<li>
							<div>
								<img src="img/shouye14.jpg"/>
							</div>
							<div>
									<p>广州舞者官方群</p>
									<p><span>一场梦幻般的体验，小心迷失</span><a><img src="img/shouye23.png"/></a></p>
									<ul>
										<li><img src="img/shouye20.png"/>&ensp;96</li>
										<li><img src="img/shouye21.png"/>&ensp;96</li>
										<li><img src="img/shouye22.png"/>&ensp;13</li>
									</ul>
							</div>
						</li>
						</li>
						<li>
							<li>
							<div>
								<img src="img/shouye14.jpg"/>
							</div>
							<div>
									<p>广州舞者官方群</p>
									<p><span>一场梦幻般的体验，小心迷失</span><a><img src="img/shouye23.png"/></a></p>
									<ul>
										<li><img src="img/shouye20.png"/>&ensp;96</li>
										<li><img src="img/shouye21.png"/>&ensp;96</li>
										<li><img src="img/shouye22.png"/>&ensp;13</li>
									</ul>
							</div>
						</li>
						</li>
					</ul>
				</div>
			</div>
			<!--底部-->
			<div class="foot">
				<ul>
					<li><a><img src="img/shouye16.png"/></a></li>
					<li><a><img src="img/shouye17.png"/></a></li>
					<li><a><img src="img/shouye19.png"/></a></li>
					<li><a><img src="img/shouye18.png"/></a></li>
					<li><a><img src="img/shouye15.png"/></a></li>
				</ul>
			</div>
		</div>
		<script type="text/javascript">
				//获取viewsportWidth的宽度值
				console.log("手机viewportwidth",document.documentElement.clientWidth);
				    var viewPortWidth=document.documentElement.clientWidth;
				    //动态设置html应该设置的fontsize大小
				    //根据设计图和基本fontsize算出目标手机下应有的fontsize
				    var fontSize=viewPortWidth*40/640;
				    console.log(fontSize);
				    //把计算出来的fontSize真正赋值给html
				    document.documentElement.style.fontSize = fontSize+"px";
			</script>
	</body>
</html>
